编辑班组付款申请

<template>
  <div class="box">
    <h1>编辑---班组付款申请</h1>
    <el-form
      :model="addruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="110px"
      class="demo-ruleForm"
    >
      <el-form-item label="标题" prop="mustRequired">
        <el-input v-model="addruleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="施工组合同" prop="mustRequired">
        <el-select
          v-model="addruleForm.constructionTeamContractName"
          placeholder="请选择活动区域"
          @focus="contractFocus"
          @change="selectContent"
        >
          <el-option
            v-for="item in DropDownBox"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关联项目">
        <el-input v-model="addruleForm.relatedProjectsName" disabled></el-input>
      </el-form-item>
      <el-form-item label="活动时间" required>
        <el-col :span="11">
          <el-form-item prop="mustRequired">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="addruleForm.expectedDateOfPayment"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="拟付款金额" prop="mustRequired">
        <el-input v-model="addruleForm.paymentAmount"></el-input>
      </el-form-item>
      <el-form-item label="收款账户">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            type="index"
            :index="indexMethod"
            align="center"
            prop="id"
            label="序号"
            width="100px"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="bankAccountName"
            label="户名"
            width="100px"
          >
          </el-table-column>
          <el-table-column align="center" prop="bankOpeningBank" label="开户行">
          </el-table-column>
          <el-table-column
            align="center"
            prop="bankAccountNum"
            label="账号"
            width="200"
          >
          </el-table-column>
          <el-table-column align="center" label="选择" fixed="right">
            <template slot-scope="scope">
              <el-radio
                name="singleChoice"
                v-model="radio"
                :label="1"
                @change="collectMoney(scope.row)"
                >&nbsp;</el-radio
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item
        label="合同付款备注"
        style="text-align: left"
        prop="required"
      >
        <textarea
          v-model="addruleForm.notesOnContractPayment"
          name=""
          id=""
          cols="40"
          rows="8"
        ></textarea>
      </el-form-item>
      <el-form-item label="是否紧急" style="text-align: left">
        <el-switch
          v-model="addruleForm.stateEmergency"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </el-form-item>
      <el-form-item
        label="项目审批单"
        prop="mustRequired"
        style="text-align: left"
      >
        <el-upload
          ref="wenjian1"
          name="myFile1"
          class="upload-demo"
          action
          :auto-upload="false"
          :http-request="projectFile"
          accept=".Word,Excel,.PDF,.JPG,.PNG,.ZIP"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip">
            <span class="iconfont iconColor">
              <span v-if="fileProjectHouZhui == 'jpg'">&#xe67c;</span>
              <span v-if="fileProjectHouZhui == 'pdf'">&#xe623;</span>
              <span v-if="fileProjectHouZhui == 'docx'">&#xe640;</span>
              <span v-if="fileProjectHouZhui == 'ppt'">&#xe66b;</span>
              <span v-if="fileProjectHouZhui == 'xlsx'">&#xe679;</span>
              <span v-if="fileProjectHouZhui == 'zip'">&#xe61a;</span>
              <span v-if="fileProjectHouZhui == 'txt'">&#xe6e1;</span>
            </span>
            <span>{{ fileProject }}</span>
          </div>
          <div slot="tip" class="el-upload__tip">
            文件格式为Word. Excel. PDF. JPG. PNG. ZIP等, 大小不超过10M
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item
        label="产值确认单"
        prop="mustRequired"
        style="text-align: left"
      >
        <el-upload
          ref="wenjian2"
          name="myFile2"
          class="upload-demo"
          action
          :auto-upload="false"
          :http-request="outputFile"
          accept=".Word,Excel,.PDF,.JPG,.PNG,.ZIP"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip">
            <span class="iconfont iconColor">
              <span v-if="fileValueHouZhui == 'jpg'">&#xe67c;</span>
              <span v-if="fileValueHouZhui == 'pdf'">&#xe623;</span>
              <span v-if="fileValueHouZhui == 'docx'">&#xe640;</span>
              <span v-if="fileValueHouZhui == 'ppt'">&#xe66b;</span>
              <span v-if="fileValueHouZhui == 'xlsx'">&#xe679;</span>
              <span v-if="fileValueHouZhui == 'zip'">&#xe61a;</span>
              <span v-if="fileValueHouZhui == 'txt'">&#xe6e1;</span>
            </span>
            <span>{{ fileValue }}</span>
          </div>
          <div slot="tip" class="el-upload__tip">
            文件格式为Word. Excel. PDF. JPG. PNG. ZIP等, 大小不超过10M
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item
        v-model="addruleForm.approver"
        label="审批人"
        prop="mustRequired"
        class="ccpeople clearFix"
      >
        <div class="touxiang" v-for="a in information" :key="a.touXiang">
          <div>
            <img :src="a.touXiang" alt="加载失败" />
          </div>
          <div>{{ a.name }}</div>
        </div>
        <el-button class="iconfont">&#xe63e;</el-button>
      </el-form-item>
      <el-form-item
        v-model="addruleForm.ccpeople"
        label="抄送人"
        prop="mustRequired"
        class="ccpeople clearFix"
      >
        <div class="touxiang" v-for="b in information" :key="b.touXiang">
          <div>
            <!-- <img :src="b.touXiang" alt="加载失败" /> -->
            <img :src="b.touXiang" alt="加载失败" />
          </div>
          <div>{{ b.name }}</div>
        </div>
        <el-button class="iconfont">&#xe63e;</el-button>
      </el-form-item>
    </el-form>
    <div style="text-align: center">
      <el-button type="primary" @click="preservation">保存为草稿</el-button>
      <el-button type="primary">提交审核</el-button>
      <el-button @click="ret">取消</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
let formData = new FormData();
//编辑
export default {
  name: "editPage",
  components: {},
  data() {
    return {
      host: axios.defaults.baseURL,
      state: true,
      radio: 1,
      accountData: [],
      DropDownBox: [],
      addruleForm: {
        title: "",
        constructionTeamContractName: "", //合同
        relatedProjectsName: "", //关联项目
        expectedDateOfPayment: "", //拟付款日期
        paymentAmount: "", //付款金额
        collectionAccount: "", //收款账户
        notesOnContractPayment: "", //备注
        stateEmergency: "", //紧急
        projectCorrect: "", //项目审批
        outputValue: "", //产值确认
        approver: "", //审批人
        ccpeople: "", //抄送人
      },
      rules: {
        required: [{ required: true, message: "必填", trigger: "blur" }],
      },
      tableData: [
        {
          bankOpeningBank: "招商银行上海分行",
          bankAccountName: "张三",
          bankAccountNum: "5555554158262625485",
        },
      ],
      information: [],
      fileProject: "", //项目
      fileProjectHouZhui: "",
      fileValue: "", //产值
      fileValueHouZhui: "",
    };
  },
  computed: {},
  methods: {
    indexMethod(index) {
      return index + 1;
    },
    getData() {
      let obj = {
        account: Number(JSON.parse(sessionStorage.getItem("employee")).account),
        flowNum: sessionStorage.getItem("flowNum"),
      };
      this.$batchApi.classMoneyAddECHO(obj).then((data) => {
        console.log(data.data);
        let file1 = data.data.data.productionConfirmation;
        this.fileValueHouZhui = file1.substring(file1.lastIndexOf(".") + 1); //文件后缀
        this.fileValue = file1.substring(file1.lastIndexOf("/") + 1); //文件名

        let file2 = data.data.data.projectApprovalForm;
        this.fileProjectHouZhui = file2.substring(file2.lastIndexOf(".") + 1); //文件后缀
        this.fileProject = file2.substring(file2.lastIndexOf("/") + 1); //文件名
        // 回显
        this.addruleForm = data.data.data;
        data.data.data.emergency == 0
          ? (this.addruleForm.stateEmergency = false)
          : (this.addruleForm.stateEmergency = true); //紧急
        this.accountData = data.data.data.bankAccount;
        this.information.push(data.data.data.peopleWhoCopiedMessage);
      });
    },
    //警告
    open4(str) {
      this.$message.error(str);
    },
    //成功
    open2(str) {
      this.$message({
        message: str,
        type: "success",
      });
    },
    //返回
    ret() {
      this.$router.go(-1); //返回上一层
      sessionStorage.removeItem("flowNum");
    },
    collectMoney(value) {
      this.addruleForm.collectionAccount = value.name;
    },
    // 项目审批单-----上传
    projectFile(content) {
      formData.append("productionConfirmation", content.file);
    },
    // 产值确认单-----上传
    outputFile(content) {
      formData.append("projectApprovalForm", content.file);
      formData.append("title", this.addruleForm.title);
      formData.append(
        "constructionTeamContractId ",
        Number(this.addruleForm.contractid)
      ); //合同id
      formData.append("relatedProjectsId", this.addruleForm.associatedItemsID); //关联项目 ID
      formData.append("expectedDateOfPayment", this.addruleForm.paymentData); //拟付款日期
      formData.append("paymentAmount", Number(this.addruleForm.paymentMoney)); //付款金额
      formData.append(
        "accountToBeCreditedId",
        this.addruleForm.collectionAccount
      ); //收款账户ID
      // formData.append("auditStatus", 0); //提交状态
      formData.append("notesOnContractPayment", this.addruleForm.remarks); //备注
      formData.append("emergency", this.addruleForm.stateEmergency); //紧急
      formData.append("proposerNum", 10003); //申请人工号
      formData.append("auditUserNum", [10000]); //审批人  this.addruleForm.approver
      formData.append("carbonCopyRecipients", 10004); //抄送人  this.addruleForm.ccpeople
      formData.append("flowNum", sessionStorage.getItem("flowNum")); //流程号
      this.$batchApi.classMoneyAddData(formData).then((data) => {
        console.log(data.data);
        data.data.code == 200 ? this.open2("上传成功") : this.open4("上传失败");
      });
    },
    //保存为草稿
    preservation() {
      formData.append("auditStatus", 0); //提交状态
      this.$refs.wenjian1.submit();
      this.$refs.wenjian2.submit();
    },
    contractFocus() {
      this.DropDownBox = [
        { label: "合同eg3ergg", value: "合同一" },
        { label: "合同hahhah", value: "合同22222" },
      ];
      // this.$axios
      //   .get("http://47.100.30.12:8080/groupPaymentApplication/insert")
      //   .then((data) => {
      //     console.log(data.data);
      //   });
    },
    selectContent() {
      console.log("选中,发起请求");
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style scoped lang='less'>
.box {
  margin-left: 10%;
}
.el-form {
  padding: 20px;
  width: 80%;
  .el-form-item {
    .el-col {
      width: 40%;
    }
    .el-input,
    .el-select {
      width: 40%;
    }
  }
  .el-select {
    width: 100%;
  }
}
table {
  font-size: 12px !important;
}
textarea {
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  outline: none;
}
.ccpeople {
  margin-bottom: 0;
  text-align: left;
  height: 130px;
  // line-height: 40px;
  .el-button {
    float: left;
    width: 80px;
    height: 80px;
    font-size: 20px;
    font-weight: bold;
  }
  .touxiang {
    float: left;
    margin-right: 10px;
    width: 80px;
    height: 80px;
    div:nth-child(1) {
      width: 80px;
      height: 80px;
      img {
        width: 80px;
      }
    }
    div:nth-child(2) {
      text-align: center;
    }
  }
}
.iconColor span {
  // color: pink;
  font-size: 30px;
  margin-right: 5px;
}
</style>